<template>
    <div>
                  <mu-appbar style="width: 100%;" title="组织信息" color="primary">  
                <mu-button icon slot="left" to="/Origanization">
                <mu-icon value="arrow_back"></mu-icon>
                </mu-button>
                <mu-button flat slot="right"  @click="setU()"><mu-icon value="edit"></mu-icon></mu-button>
                </mu-appbar>
        <h3> 基本信息</h3>
          <mu-list>
<mu-list-item button :ripple="false">
      <mu-list-item-title>头像</mu-list-item-title>
      <mu-list-item-action>
       <img :src="avatar" style="height:40px;width;50px">
       </mu-list-item-action>
    </mu-list-item>
    <mu-divider></mu-divider>
    <mu-list-item button :ripple="false">
      <mu-list-item-title>用户名</mu-list-item-title>
      <mu-list-item-action>
       {{username}}
      </mu-list-item-action>
    </mu-list-item>
    <mu-divider></mu-divider>
    <mu-list-item button :ripple="false">
      <mu-list-item-title>组织名称</mu-list-item-title>
      <mu-list-item-action>
       {{name}}
      </mu-list-item-action>
    </mu-list-item>
    <mu-divider></mu-divider>

    <mu-list-item button :ripple="false">
      <mu-list-item-title>联系电话</mu-list-item-title>
      <mu-list-item-action>
       {{phone}}
      </mu-list-item-action>
    </mu-list-item>
    <mu-divider></mu-divider>
        <mu-list-item button :ripple="false">
      <mu-list-item-title>高校</mu-list-item-title>
      <mu-list-item-action>
       {{cname}}
      </mu-list-item-action>
    </mu-list-item>
    <mu-divider></mu-divider>
  </mu-list> 
       <div v-if="set"> 
           <mu-button color="success" round  @click="resetavatar()">
            <mu-icon left value="star"></mu-icon>
            修改头像
            </mu-button>
                <mu-dialog title="修改头像" width="360" :open.sync="openSimple">
                    
                         <el-upload
                        class="avatar-uploader"
                        :action= domain
                        :http-request = upqiniu
                        :show-file-list="false"
                        :before-upload="beforeUpload">
                        <img v-if="avatar" :src="avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

                <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">Close</mu-button>
                </mu-dialog>

            <mu-button color="success" round  @click="resetphone()">
            <mu-icon left value="phone"></mu-icon>
            联系电话
            </mu-button>
            
       </div>
       
    <mu-button flat color="secondary" v-if="renzheng.status===0" to="/Origanization/Authentication"> <mu-icon value="remove_circle" left></mu-icon>未认证</mu-button>
    <mu-button flat color="success"  v-if="renzheng.status===3 || checkO===1"><mu-icon value="check_circle" right></mu-icon>已认证</mu-button>
    <mu-button flat color="warning"  v-if="renzheng.status===1"><mu-icon value="remove_circle" right></mu-icon>审核中</mu-button>
    <mu-list v-if="renzheng.status===3 || checkO===1">
            <mu-list-item button :ripple="false">
            <mu-list-item-title>组织负责人</mu-list-item-title>
            <mu-list-item-action>
            {{renzheng.Zname}}
            </mu-list-item-action>
            </mu-list-item>
            <mu-divider></mu-divider>
            <mu-list-item button :ripple="false">
            <mu-list-item-title>证件号</mu-list-item-title>
            <mu-list-item-action>
            {{renzheng.number}}
            </mu-list-item-action>
            </mu-list-item>
            <mu-divider></mu-divider>
            <mu-list-item button :ripple="false">
            <mu-list-item-title>手持证件照</mu-list-item-title>
            <mu-list-item-action>
            <img :src="renzheng.idcard" style="height:40px;width;50px">
            </mu-list-item-action>
            </mu-list-item>
            <mu-divider></mu-divider>
  </mu-list> 

      <mu-button color="indigo400" flat to="/Origanization/Authentication">
      更改认证信息
      <mu-icon right value="send"></mu-icon>
    </mu-button>
    <br><br>
    </div>
</template>
<script>
import axios from "axios";
import 'muse-ui-message/dist/muse-ui-message.css';
import Message from 'muse-ui-message';
import Toast from 'muse-ui-toast';
export default {
    data(){
       axios.get('/api/user/getUserMsg').then(result=>{
           let user=result.data;
           this.username=user.username;
           this.name=user.name;
           this.phone=user.phone;
           this.cname=user.cname
           this.avatar=user.avatar
           this.checkO=user.checkO
           this.renzheng=user.renzheng
           
       })
return{
    set:false,
    checkO:null,
    username:'',
    name:'',
    phone:'',
    cname:'',
    avatar:'', 
    renzheng:{},
    openSimple: false,
     token: {},
     // 七牛云的上传地址，华南区
     domain: 'https://upload-z2.qiniup.com',
      // 这是七牛云空间的外链默认域名
      qiniuaddr: 'p9zybqbtm.bkt.clouddn.com'
    }

    },
   
   methods:{

       setU(){
           if(this.set==false){this.set=true}
           else{this.set=false}  
       },

            resetphone () {
            Message.prompt('输入修改的联系电话', '提示').then(({result,value})=>{
            if(result){
            console.log(value)
              axios.post("/api/user/resetPhone",{phone:value}).then(result=>{
                 if(result.data=="修改成功"){
                          Toast.success('修改成功');
                         this.set=false
                         this.phone=value
                     }else{
                         console.log('修改失败')
                         Toast.error('修改失败');
                         this.set=false
                     }
            })
            }else{
            console.log("取消")
            }
            });
    },
    resetavatar(){
        console.log("修改头像")
        this.openSimple = true;
    },
        closeSimpleDialog () {
      this.openSimple = false;
    },

    // 上传文件到七牛云

                upqiniu (req) {
                console.log(req)
                const config = {
                    headers: {'Content-Type': 'multipart/form-data'}
                }
                let filetype = ''
                if (req.file.type === 'image/png') {
                    filetype = 'png'
                } else {
                    filetype = 'jpg'
                }
                // 重命名要上传的文件
                const keyname = 'adver' + + new Date() + Math.floor(Math.random() * 100)  +'.' +filetype
                // 从后端获取上传凭证token
                axios.get('/api/token').then(res => {
                    console.log(res)
                    const formdata = new FormData()
                    formdata.append('file', req.file)
                    formdata.append('token', res.data)
                    formdata.append('key', keyname)
                    // 获取到凭证之后再将文件上传到七牛云空间
                    axios.post(this.domain, formdata, config).then(res1 => {
                    let pic_url='http://' + this.qiniuaddr + '/' + res1.data.key
                   
                    axios.post('/api/user/setAvatar',{pic_url}).then(keepres =>{
                    console.log('OK')
                    })  
                     this.avatar = 'http://' + this.qiniuaddr + '/' + res1.data.key +'?v='+Math.floor(Math.random() * 100);
                      this.set=false  
                      Toast.success('修改成功');          
                    })
                })
                },
                    // 验证文件合法性
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        console.log('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
       console.log('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
   }
}
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>